*{
    margin: 0;
    padding: 0;
    font-size: 0;
    box-sizing: border-box;
}
.box{
    margin-top: 3%;
    /* float:right; */
    /* border: 2px solid black; */
    width: 260px;
    height: 660px;
    position: fixed;
    overflow: hidden;
    right: 0;
}
a{  font-size: 25px;
    color: #ba8faf;
    text-decoration: none;
}
body{
    background-color:rgb(179, 176, 176);
}
ul{
    list-style: none;
    transform: translateX(210px);
    
}
.list{
    font-size: 25px;
    width: 50px;
    height: 50px;
    color: white;
    display: inline-block;
    background-color:rgb(26 116 162);
    text-align: center;
    line-height: 50px;
<<<<<<< HEAD
   
=======

>>>>>>> bc23bca88ea45f5690ca420f9efda61419407a35
}
.catalogue{
    width: 200px;
    height: 50px;
    display: inline-block;
    background-color: white;
    text-align:left;
    padding-left: 10px;
    line-height: 50px;
<<<<<<< HEAD
    
=======

>>>>>>> bc23bca88ea45f5690ca420f9efda61419407a35
}
li:first-child{
    margin-top: 1%;
    overflow: hidden;
    /* transform: translateX(80%); */
    position: absolute;
    transition: 0.3s;
}
li:nth-child(2){
    margin-top: 1%;
    overflow: hidden;
    /* transform: translateX(80%); */
    position: absolute;
    top:55px;
    transition: 0.4s 0.1s;
}
li:nth-child(3){
    margin-top: 1%;
    overflow: hidden;
    /* transform: translateX(80%); */
    position: absolute;
    top:110px;
    transition: 0.5s 0.15s;
}
li:nth-child(4){
    margin-top: 1%;
    overflow: hidden;
    /* transform: translateX(80%); */
    position: absolute;
    top:165px;
    transition: 0.6s 0.2s;
}
li:nth-child(5){
    margin-top: 1%;
    overflow: hidden;
    /* transform: translateX(80%); */
    position: absolute;
    top:220px;
    transition: 0.7s 0.25s;
}
li:nth-child(6){
    margin-top: 1%;
    overflow: hidden;
    /* transform: translateX(80%); */
    position: absolute;
    top:275px;
    transition: 0.8s 0.3s;
}
li:nth-child(7){
    margin-top: 1%;
    overflow: hidden;
    /* transform: translateX(80%); */
    position: absolute;
    top:330px;
    transition: 0.9s 0.35s;
}
li:nth-child(8){
    margin-top: 1%;
    overflow: hidden;
    /* transform: translateX(80%); */
    position: absolute;
    top:385px;
    transition: 1s 0.4s;
}
li:nth-child(9){
    margin-top: 1%;
    overflow: hidden;
    /* transform: translateX(80%); */
    position: absolute;
    top:440px;
    transition: 1.1s 0.45s;
}
li:nth-child(10){
    margin-top: 1%;
    overflow: hidden;
    /* transform: translateX(80%); */
    position: absolute;
    top:495px;
    transition: 1.2s 0.5s;
}
li:nth-child(11){
    margin-top: 1%;
    overflow: hidden;
    /* transform: translateX(80%); */
    position: absolute;
    top:550px;
    transition: 1.3s 0.55s;
}
li:nth-child(12){
    margin-top: 1%;
    overflow: hidden;
    /* transform: translateX(80%); */
    position: absolute;
    top:605px;
    transition: 1.6s 0.6s;
}
/* 
ul:hover li{
    left: -200px;
} */
ul:hover li{
    transform: translateX(-190px);
}
li:hover .list{
    background-color: rgb(5 183 0);
}
li:hover .catalogue a{
    color:rgb(98 156 189);
}